<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JarManage</title>
    <script src="js/load.js"></script>
    <link rel="shortcut icon" href="images/favicon.png">
    <style>
        .layui-card-header{
            background-color: #eee !important;
        }
        .layui-card{
            border: 1px solid #eee !important;
        }
        .opbody{
            display: flex;
            flex-direction: column;
        }
        .optitle{
            width: 100px;
            text-align: center;
        }
        .optitle{
            width: 100px;
            text-align: center;
        }
        .oprow{
            display:flex;
            flex-direction: row;
            height: 40px;
            align-items: center;
        }
        .frame{
            width: 100%;
            margin: 0;
            border: none;
            vertical-align:bottom;
        }
        .layui-nav-tree .layui-nav-item{
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            justify-content: center;
        }

        .menu-title{
            width: 80px;
        }
        .menu-icon{
            font-size: 16px;
        }
    </style>
</head>

<body>
<div class="layui-fluid"  style="padding: 0;height: 100%;width: 100%">
    <div class="flexrow">
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo">
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-windows menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('Machine')">服务器监控</a>
            </li>
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-website menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('JarManage')">Jar包部署</a>
            </li>
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-set-fill menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('MySQL')">MySQL管理</a>
            </li>
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-template-1 menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('Redis')">Redis管理</a>
            </li>
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-file-b menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('File')">文件管理</a>
            </li>
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-app menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('StaticDepoly')">静态部署</a>
            </li>
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-release menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('DynamicProxy')">动态代理</a>
            </li>
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-set menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('Service')">服务管理</a>
            </li>
        </ul>
        <iframe id="frame" src="" class="frame" ></iframe>
    </div>
</div>
</body>
</html>


<script>

    $(function () {
        ChangeFrame("Machine")
    })

    function ChangeFrame(tag) {
        if(tag=="Machine"){
            $("#frame").attr("src",GetRootPath()+"pages/machine/machineinfo.html");
        } else if(tag=="JarManage"){
            $("#frame").attr("src",GetRootPath()+"pages/depoly/project_list.html");
        } else if(tag=="MySQL"){
            $("#frame").attr("src",GetRootPath()+"pages/plugin/adminer.php");
        }else if(tag=="Redis"){
            $("#frame").attr("src",GetRootPath()+"pages/redis/redis_manage.html");
        }else if(tag=="File"){
            $("#frame").attr("src",GetRootPath()+"pages/plugin/filemanage.php");
        }else if(tag=="StaticDepoly"){
            $("#frame").attr("src",GetRootPath()+"pages/plugin/staticdepoly.php");
        }else if(tag=="DynamicProxy"){
            $("#frame").attr("src",GetRootPath()+"pages/proxy/proxy_list.html");
        }else if(tag=="Service"){
            $("#frame").attr("src",GetRootPath()+"pages/service/service_list.html");
        }
    }

</script>